import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import parseUrl from './../../utils/parseUrl';

import {
    MessageItem
} from './types';

import {
    Avatar,
    Press
} from './../../components';

import {
    Actions
} from 'react-native-router-flux';

import man_icon from './../../images/home/badge/man_icon.png';
import woman_icon from './../../images/home/badge/woman_icon.png';
import phone_icon from './../../images/home/badge/phone_icon.png';
import photo_icon from './../../images/home/badge/photo_icon.png';


interface Props {
    data: MessageItem,
    mySelf: boolean
}

class MsgProfile extends PureComponent<Props> {

    static defaultProps = {
        data: {},
        mySelf: false
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get extend() {
        const {
            extend
        } = this.Data;
        return extend || {};
    }

    get avatar() {
        const {
            avatar
        } = this.extend;
        return parseUrl(avatar);
    }

    get gender() {
        const {
            gender
        } = this.extend;
        const {
            id = 0
        } = gender || {};
        return id;
    }

    get nickName() {
        const {
            nickName
        } = this.extend;
        return nickName;
    }

    get mobileVerify() {
        const {
            mobileVerify = 0
        } = this.extend;
        return !!mobileVerify
    }

    get photoVerify() {
        const {
            photoVerify = 0
        } = this.extend;
        return !!photoVerify;
    }

    get descStr() {
        const {
            age = 0,
            location = {}
        } = this.extend;

        const {
            city = {},
            country = {}
        } = location;

        return [
            age,
            city.label,
            country.label
        ].filter(v => !!v).join(`, `)
    }

    private _onPress = () => {
       const {
           userId
       } = this.extend;
       Actions.push(`/profile/:userId`,{
           userId:userId
       })
    }

    get badge() {
        return (
            <View style={styles.badge}>
                {this.gender === 1 && (
                    <Image
                        source={woman_icon}
                        style={styles.badgeItem}
                    />
                )}
                {this.gender === 2 && (
                    <Image
                        source={man_icon}
                        style={styles.badgeItem}
                    />
                )}
                {this.mobileVerify && (
                    <Image
                        source={phone_icon}
                        style={styles.badgeItem}
                    />
                )}
                {this.photoVerify && (
                    <Image
                        source={photo_icon}
                        style={styles.badgeItem}
                    />
                )}
            </View>
        )
    }

    render() {
        return (
            <Press style={styles.container} onPress={this._onPress}>
                <View style={styles.header}>
                    <Avatar
                        size={48}
                        url={this.avatar}
                        gender={this.gender}
                    />
                    <View style={styles.content}>
                        <View style={styles.userName}>
                            <Text style={styles.nickName}>
                                {this.nickName}
                            </Text>
                            {this.badge}
                        </View>
                        <Text style={styles.desc}>
                            {this.descStr}
                        </Text>
                    </View>
                </View>
                <Text style={styles.typeName}>
                    Profile info
                </Text>
            </Press>
        )
    }
}

export default MsgProfile;

const styles = StyleSheet.create({
    container: {
        padding: 16,
        width: `100%`,
        borderRadius: 6,
        backgroundColor: `#000`
    },
    header: {
        paddingBottom: 12,
        alignItems: `center`,
        flexDirection: `row`,
        borderColor: `#4a4a4a`,
        borderBottomWidth: 1
    },
    userName: {
        alignItems: `center`,
        flexDirection: `row`
    },
    nickName: {
        color: `#fff`,
        fontSize: 14,
    },
    content: {
        flex: 1,
        paddingLeft: 10
    },
    desc: {
        paddingTop: 6,
        color: `#999`,
        fontSize: 12
    },
    badge: {
        marginLeft: 10,
        alignItems: `center`,
        flexDirection: `row`
    },
    badgeItem: {
        width: 10,
        height: 10,
        marginRight: 4
    },
    typeName: {
        fontSize: 12,
        paddingTop: 16,
        color: `#6D7278`
    }
}) as any;